//vue2.0的过滤器与vue1.0有很大的区别
//vue2.0去除了系统过滤器
<template>
    <div id="filter">
      <div>
        <li v-for="item in list">{{ item | json | Upper}}</li>
      </div>
      <br/>
      <br/>
      <table>
        <thead>
          <tr>
            <td v-for="item in lis">{{ item | Lower }}</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
            <td v-for="items in lis">{{ item[items] }}</td>
          </tr>
        </tbody>
      </table>
      <br/>
      <br/>
      <div id="filter1">
        {{ time }}<br/>
        {{ time | datefmt}}
      </div>
    </div>
</template>

<script>
    export default {
        name: "filters",
      data: function () {
        return {
          lis:['uname','age'],
          list: [
            {uname: 'itcast',age:20},
            {uname: 'Heima',age:10}
          ],
          time: new Date()
        }
      },
      //局部过滤器
      filters:{
          //时间格式化
          datefmt:function (date) {
            var res = '';
            var input = new Date(date);
            var year = input.getFullYear();
            var month = input.getMonth() + 1;
            var day = input.getDate();
            res = year + '-' + month + '-' + day;
            return res;
          },
        //转换成json对象
        json:function (value) {
          var res = JSON.stringify(value);
          return res;
        },
        //转换成大写
        Upper:function (value) {
          return value.toUpperCase();
        },
        //转化成小写
        Lower:function (value) {
          return value.toLowerCase();
        },
        //首字母大写
        Capitalize:function (value) {
          return value.charAt(0).toUpperCase() + value.slice(1);
        }
    }
    }
</script>

<style scoped>

</style>
